<template>
  <div class="page-container">
    <div class="header-background">
      <van-image
        round
        width="60px"
        height="60px"
        :src="userInfo.portrait || require('@/assets/defaultAvatar.png')"
        class="header-avatar"
      />
      <!-- <div class="header-name" @click="goLogin()"> -->
      <div class="header-name" @click="isLogin ? '' : goLogin()">
        {{ isLogin ? userInfo.nickname : '登录/注册 >' }}
      </div>
    </div>
    <div v-if="isLogin">
      <van-cell title="门店信息" is-link @click="showStoreInfo" />
      <van-cell title="我的订单" is-link to="package" />
      <van-cell title="预约信息" is-link to="reservation" />
      <van-cell
        title="上传报告"
        is-link
        :to="{
          name: 'uploadReport',
          query: {
            report_image: userInfo.report_image,
            report_fail_reason: userInfo.report_fail_reason,
            report_status:
              userInfo.report_image && userInfo.report_image.length !== 0
                ? userInfo.report_status
                : 99
          }
        }"
      />
      <van-cell title="退出登录" is-link @click="logout" />
    </div>
    <van-tabbar
      v-model="tabbarActive"
      class="page-tottom-tabbar"
      @change="changeTabbar"
    >
      <van-tabbar-item name="home" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item name="case" icon="star-o">数据</van-tabbar-item>
      <van-tabbar-item name="package" icon="bag-o">订单</van-tabbar-item>
      <van-tabbar-item name="personal" icon="friends-o">我的</van-tabbar-item>
    </van-tabbar>
    <!-- 门店信息 -->
    <van-dialog v-model="storeInfoDialog" title="" :show-cancel-button="false">
      <div class="storeInfo-box">
        <div class="storeInfo-name">{{ storeInfo.name }}</div>
        <div class="storeInfo-name2">
          <van-icon name="location-o" />{{ storeInfo.full_address }}
        </div>
        <div class="storeInfo-name2">
          <van-icon name="underway-o" />{{ storeInfo.open_time }}
        </div>
        <div class="storeInfo-name2">
          <van-icon name="phone-circle-o" />{{ storeInfo.phone }}
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import { getURLParam } from '@/utils/common'
import { storeInfo } from '@/api/store'
import { logout } from '@/api/login'
import { userInfo } from '@/api/user'
import { Button, Tabbar, TabbarItem, Icon, Toast, Dialog } from 'vant'
export default {
  name: 'Home',
  components: {
    [Button.name]: Button,
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    [Icon.name]: Icon,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog
  },
  data() {
    return {
      isLogin: Boolean(localStorage.getItem('TOKEN')),
      tabbarActive: 'personal',
      storeInfoDialog: false,
      storeInfo: {}, // 门店信息
      userInfo: {}
    }
  },
  created() {
    if (localStorage.getItem('TOKEN')) {
      this.getUserInfo()
    }
  },
  methods: {
    // 切换菜单
    changeTabbar(e) {
      if (e === 'home') {
        this.$router.push({ name: 'home' })
      } else if (e === 'case') {
        this.$router.push({ name: 'case' })
      } else if (e === 'package') {
        this.$router.push({ name: 'package' })
      } else if (e === 'personal') {
        this.$router.push({ name: 'personal' })
      }
    },
    // 用户信息
    getUserInfo() {
      userInfo().then((res) => {
        if (res.error.code === 0) {
          this.userInfo = res.data
          const beforeStoreId = res.data.store_id // 之前的id
          const beforeStoreName = res.data.store_name // 之前的name
          const nowStoreId = localStorage.getItem('adl_store_id') // 现在扫码的id
          // const nowStoreName = localStorage.getItem('adl_store_name') // 现在扫码的name
          // 判断是否需要改绑门店
          // if (
          //   getURLParam('fromLogin') &&
          //   getURLParam('fromLogin') === '1' &&
          //   Number(nowStoreId) !== beforeStoreId
          // ) {
          //   Dialog.confirm({
          //     title: '',
          //     message: `检测到您之前是在门店【${beforeStoreName}】,是否改绑到门店【${nowStoreName}】`,
          //     showCancelButton: true
          //   })
          //     .then(() => {
          //       changeStore({ store: nowStoreId }).then(() => {
          //         if (res.error.code === 0) {
          //           Toast('改绑成功')
          //           this.$router.replace({ path: '/refresh' })
          //         }
          //       })
          //     })
          //     .catch(() => {
          //       localStorage.setItem('adl_store_id', beforeStoreId)
          //       localStorage.setItem('adl_store_name', beforeStoreName)
          //     })
          // }
          // 如果之前在门店1注册，之后扫别的门店也是登录门店1,并提示
          if (
            getURLParam('fromLogin') &&
            getURLParam('fromLogin') === '1' &&
            Number(nowStoreId) !== beforeStoreId
          ) {
            Dialog.confirm({
              title: '',
              message: `您已经注册到【${beforeStoreName}】`,
              showCancelButton: false
            })
              .then(() => {})
              .catch(() => {})
            localStorage.setItem('adl_store_id', beforeStoreId)
            localStorage.setItem('adl_store_name', beforeStoreName)
          }
        }
      })
    },
    // 登录/注册
    goLogin() {
      this.$router.push({ name: 'login' })
    },
    // 门店信息
    showStoreInfo() {
      storeInfo().then((res) => {
        if (res.error.code === 0) {
          this.storeInfoDialog = true
          this.storeInfo = res.data[0]
        }
      })
    },
    // 退出登录
    logout() {
      Dialog.confirm({
        title: '',
        message: '确定退出登录吗？',
        showCancelButton: true
      })
        .then(() => {
          logout().then((res) => {
            if (res.error.code === 0) {
              localStorage.removeItem('TOKEN')
              Toast('退出成功')
              this.$router.replace({ path: '/refresh' })
            }
          })
        })
        .catch(() => {})
    }
  }
}
</script>
<style lang="less" scoped>
.header-background {
  background-image: url('../assets/bg1.jpg');
  height: 225px;
  position: relative;
  background-size: 100% 100%;
}
.header-avatar {
  position: absolute;
  bottom: 80px;
  left: 10px;
}
.header-name {
  position: absolute;
  bottom: 98px;
  left: 75px;
  color: black;
  font-size: 14px;
  &:hover {
    cursor: pointer;
  }
}
.storeInfo-box {
  box-sizing: border-box;
  padding: 20px 10px 10px;
}
.storeInfo-box div {
  line-height: 32px;
}
.storeInfo-name {
  font-weight: bold;
}
.storeInfo-name2 {
  color: #2c2c2c;
  .van-icon {
    color: black;
    margin-right: 5px;
  }
}
/deep/ .van-button__text {
  color: #323233;
}
</style>
